<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Devices.css - Modern devices crafted in pure CSS</title>
  <!-- Spectre.css CSS -->
  <link rel="stylesheet" href="dist/spectre.min.css">
  <link rel="stylesheet" href="dist/devices.css">
  <link rel="stylesheet" href="dist/demo.css">
</head>
<body>
  <div class="section section-hero">
    <div id="overview" class="grid-hero container grid-lg text-center">
      <h1>Devices.css</h1>
      <h2>Modern devices crafted in pure CSS. The first are iPhone X and iPhone 8, and more modern devices are coming.</h2>
      <p>
        <a href="#content" class="btn btn-primary btn-lg">Demo</a>
        <a href="https://github.com/picturepan2/devices.css" target="_blank" class="btn btn-primary btn-lg">GitHub</a>
      </p>
      <p class="text-gray">Latest version: <span class="version"></span></p>
      <p><a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a></p>
    </div>
  </div>

  <div class="section section-ad">
    <div class="hide-md">
      <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      <!-- GitHub-lg -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9894180784"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <div class="show-md">
      <!-- GitHub-sm -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:300px;height:250px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9278881734"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>

  <div id="content" class="section section-device">
    <div id="iphone-x" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#iphone-x" class="anchor" aria-hidden="true">#</a>iPhone X</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="device device-iphone-x">
            <div class="device-frame">
              <video class="device-screen" muted="muted" autoplay loop >
                <source src="src/video/bg-01.mp4" type="video/mp4">
              </video>
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
            <div class="device-home"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="iphone-8" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#iphone-8" class="anchor" aria-hidden="true">#</a>iPhone 8</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="dots">
            <div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
            <div class="dot tooltip" style="background:#f7e8dd;" data-tooltip="device-gold"></div>
            <div class="dot tooltip" style="background:#9b9ba0;" data-tooltip="device-spacegray"></div>
          </div>
        </div>
        <div class="column col-12">
          <div class="device device-iphone-8 device-gold">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-01.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="google-pixel-2-xl" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#google-pixel-2-xl" class="anchor" aria-hidden="true">#</a>Google Pixel 2 XL</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="device-2x">
            <div class="device device-google-pixel-2-xl">
              <div class="device-frame">
                <img class="device-screen" src="src/img/bg-06.jpg">
              </div>
              <div class="device-stripe"></div>
              <div class="device-header"></div>
              <div class="device-sensors"></div>
              <div class="device-btns"></div>
              <div class="device-power"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="google-pixel" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#google-pixel" class="anchor" aria-hidden="true">#</a>Google Pixel</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="dots">
            <div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
            <div class="dot tooltip" style="background:#6a6967;" data-tooltip="device-black"></div>
            <div class="dot tooltip" style="background:#7695ff;" data-tooltip="device-blue"></div>
          </div>
        </div>
        <div class="column col-12">
          <div class="device device-google-pixel">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-06.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="galaxy-s8" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#galaxy-s8" class="anchor" aria-hidden="true">#</a>Samsung Galaxy S8</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="dots">
            <div class="dot tooltip" style="background:#cfcfcf;" data-tooltip="device-black (default)"></div>
            <div class="dot tooltip" style="background:#a3c5e8;" data-tooltip="device-blue"></div>
          </div>
        </div>
        <div class="column col-12">
          <div class="device device-galaxy-s8 device-blue">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-04.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-ad">
    <div class="hide-md">
      <!-- GitHub-lg -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:728px;height:90px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9894180784"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
    <div class="show-md">
      <!-- GitHub-sm -->
      <ins class="adsbygoogle"
            style="display:inline-block;width:300px;height:250px"
            data-ad-client="ca-pub-2225124559530218"
            data-ad-slot="9278881734"></ins>
      <script>
      (adsbygoogle = window.adsbygoogle || []).push({});
      </script>
    </div>
  </div>

  <div class="section section-device">
    <div id="ipad-pro" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#ipad-pro" class="anchor" aria-hidden="true">#</a>iPad Pro</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="dots">
            <div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
            <div class="dot tooltip" style="background:#f7e8dd;" data-tooltip="device-gold"></div>
            <div class="dot tooltip" style="background:#facfc9;" data-tooltip="device-rosegold"></div>
            <div class="dot tooltip" style="background:#9b9ba0;" data-tooltip="device-spacegray"></div>
          </div>
        </div>
        <div class="column col-12">
          <div class="device device-ipad-pro device-gold">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-02.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="surface-pro" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#surface-pro" class="anchor" aria-hidden="true">#</a>Surface Pro</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="device device-surface-pro">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-09.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="surface-book" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#surface-book" class="anchor" aria-hidden="true">#</a>Surface Book</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="device device-surface-book">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-09.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="macbook" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#macbook" class="anchor" aria-hidden="true">#</a>MacBook</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="dots">
            <div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
            <div class="dot tooltip" style="background:#f7e8dd;" data-tooltip="device-gold"></div>
            <div class="dot tooltip" style="background:#facfc9;" data-tooltip="device-rosegold"></div>
            <div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
          </div>
        </div>
        <div class="column col-12">
          <div class="device device-macbook device-spacegray">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-07.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="macbook-pro" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#macbook-pro" class="anchor" aria-hidden="true">#</a>MacBook Pro</h3>
      <div class="columns">
        <div class="column col-12">
          <div class="dots">
            <div class="dot tooltip" style="background:#e2e3e4;" data-tooltip="device-silver (default)"></div>
            <div class="dot tooltip" style="background:#83878a;" data-tooltip="device-spacegray"></div>
          </div>
        </div>
        <div class="column col-12">
          <div class="device device-macbook-pro device-spacegray">
            <div class="device-frame">
              <img class="device-screen" src="src/img/bg-06.jpg">
            </div>
            <div class="device-stripe"></div>
            <div class="device-header"></div>
            <div class="device-sensors"></div>
            <div class="device-btns"></div>
            <div class="device-power"></div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="surface-studio" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#surface-studio" class="anchor" aria-hidden="true">#</a>Surface Studio</h3>
      <div class="columns">
          <div class="column col-12">
            <div class="device device-surface-studio">
              <div class="device-frame">
                <img class="device-screen" src="src/img/bg-09.jpg">
              </div>
              <div class="device-stripe"></div>
              <div class="device-header"></div>
              <div class="device-sensors"></div>
              <div class="device-btns"></div>
              <div class="device-power"></div>
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="imac-pro" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#imac-pro" class="anchor" aria-hidden="true">#</a>iMac Pro</h3>
      <div class="columns">
          <div class="column col-12">
            <div class="device device-imac-pro">
              <div class="device-frame">
                <img class="device-screen" src="src/img/bg-08.jpg">
              </div>
              <div class="device-stripe"></div>
              <div class="device-header"></div>
              <div class="device-sensors"></div>
              <div class="device-btns"></div>
              <div class="device-power"></div>
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="section section-device">
    <div id="apple-watch" class="container grid-xl text-center">
      <h3 class="s-title"><a href="#apple-watch" class="anchor" aria-hidden="true">#</a>Apple Watch</h3>
      <div class="columns">
          <div class="column col-12">
            <div class="device device-apple-watch">
              <div class="device-frame">
                <img class="device-screen" src="src/img/bg-08.jpg">
              </div>
              <div class="device-stripe"></div>
              <div class="device-header"></div>
              <div class="device-sensors"></div>
              <div class="device-btns"></div>
              <div class="device-power"></div>
            </div>
          </div>
      </div>
    </div>
  </div>

  <div class="section section-ads bg-gray">
    <div class="docs-ad docs-ad-sidebar text-center">
      <script id="_carbonads_js" async="" type="text/javascript" src="https://cdn.carbonads.com/carbon.js?serve=CK7DTKQW&amp;placement=picturepan2githubio"></script>
    </div>
  </div>

  <footer class="section section-footer">
    <div id="copyright" class="grid-footer container grid-lg">
      <p><a href="https://github.com/picturepan2/devices.css" target="_blank">GitHub</a> | <a href="https://twitter.com/spectrecss" target="_blank">Spectre.css</a> | <a href="https://www.paypal.me/picturepan2" target="_blank">PayPal Donate</a> | Version <span class="version"></span></p>
      <p>Code with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/devices.css/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
    </div>
  </footer>

  <!-- Google Analytics tracking code -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
    ga('create', 'UA-2702768-8', 'auto');
    ga('send', 'pageview');
  </script>
</body>
</html>
